'use client';

import { useSession, signOut } from '@/lib/auth-client';
import { User, Mail, Shield, LogOut, Settings } from 'lucide-react';

interface UserProfileProps {
  showActions?: boolean;
  compact?: boolean;
}

export default function UserProfile({ showActions = true, compact = false }: UserProfileProps) {
  const { data: session, isPending } = useSession();

  if (isPending) {
    return (
      <div className="animate-pulse">
        <div className="flex items-center space-x-3">
          <div className="w-10 h-10 bg-gray-200 rounded-full"></div>
          <div className="space-y-2">
            <div className="w-24 h-4 bg-gray-200 rounded"></div>
            <div className="w-32 h-3 bg-gray-200 rounded"></div>
          </div>
        </div>
      </div>
    );
  }

  if (!session) {
    return null;
  }

  const handleSignOut = async () => {
    try {
      await signOut();
      // 登出后刷新页面
      window.location.href = '/';
    } catch (error) {
      console.error('登出失败:', error);
      alert('登出失败，请重试');
    }
  };

  if (compact) {
    return (
      <div className="flex items-center space-x-3">
        <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
          <User className="w-4 h-4 text-blue-600" />
        </div>
        <div className="min-w-0 flex-1">
          <p className="text-sm font-medium text-gray-900 truncate">
            {session.user.name || '用户'}
          </p>
          <p className="text-xs text-gray-500 truncate">
            {session.user.email}
          </p>
        </div>
        {showActions && (
          <button
            onClick={handleSignOut}
            className="p-1 text-gray-400 hover:text-red-600 transition-colors"
            title="退出登录"
          >
            <LogOut className="w-4 h-4" />
          </button>
        )}
      </div>
    );
  }

  return (
    <div className="bg-white rounded-lg shadow-md p-6">
      <div className="flex items-start justify-between">
        <div className="flex items-center space-x-4">
          <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
            {session.user.image ? (
              <img
                src={session.user.image}
                alt={session.user.name || '用户头像'}
                className="w-16 h-16 rounded-full object-cover"
              />
            ) : (
              <User className="w-8 h-8 text-blue-600" />
            )}
          </div>
          <div>
            <h2 className="text-xl font-bold text-gray-900">
              {session.user.name || '未命名用户'}
            </h2>
            <div className="flex items-center space-x-2 text-gray-600 mt-1">
              <Mail className="w-4 h-4" />
              <span className="text-sm">{session.user.email}</span>
            </div>
                         <div className="flex items-center space-x-2 text-gray-600 mt-1">
               <Shield className="w-4 h-4" />
               <span className="text-sm capitalize">
                 {(session.user as any).role || 'user'}
               </span>
             </div>
          </div>
        </div>
        
        {showActions && (
          <div className="flex space-x-2">
            <button
              onClick={() => alert('设置功能开发中...')}
              className="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
              title="设置"
            >
              <Settings className="w-5 h-5" />
            </button>
            <button
              onClick={handleSignOut}
              className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors flex items-center space-x-2"
            >
              <LogOut className="w-4 h-4" />
              <span>退出登录</span>
            </button>
          </div>
        )}
      </div>
      
      {/* 额外信息 */}
      <div className="mt-4 pt-4 border-t border-gray-200">
        <div className="grid grid-cols-2 gap-4 text-sm">
          <div>
            <span className="text-gray-500">邮箱验证状态:</span>
            <span className={`ml-2 font-medium ${
              session.user.emailVerified ? 'text-green-600' : 'text-orange-600'
            }`}>
              {session.user.emailVerified ? '已验证' : '未验证'}
            </span>
          </div>
          <div>
            <span className="text-gray-500">用户ID:</span>
            <span className="ml-2 font-mono text-xs text-gray-700">
              {session.user.id}
            </span>
          </div>
        </div>
      </div>
    </div>
  );
} 